$(function() {

    ///$("#li").hide();
    //$('#user_level').text()
function display(myJson){
      $('#li #word_index').text(myJson.user_level.toString());
      $('#li #word').text(myJson.word);
      $('#li #word_tip').text(myJson.word_tip);
      $('#li #word_def').text(myJson.word_def); 
      $('#li #wordMusic').attr('src',myJson.wordMusic);
      $('#li #image_a').attr('src',myJson.image_a);
       $('#li #image_b').attr('src',myJson.image_b);
       $('#li #clipart_c').attr('src',myJson.clipart_c);
       $('#li #clipart_d').attr('src',myJson.clipart_d);
       $('#li .to_bag').attr('checked',false);
       var word=myJson.word;


        $(".expand_explode_list").remove();
};





///
var user_level=parseInt($('#user_level').text())
       var path ="jq/"+user_level.toString()
var myHeaders = new Headers();
     ///  console.log(next_user_level.toString());
       fetch(path, {
              method: 'GET',
              headers: myHeaders,
              credentials: "include"
            })        
  .then(function(response) {

    return response.json();
  })
.then(response =>display (response));


///

    function submit_form_next(e) {
      var next_user_level=parseInt($('#user_level').text())
      next_user_level=next_user_level+1
       var path ="jq/"+next_user_level.toString()
       var myHeaders = new Headers();
     ///  console.log(next_user_level.toString());
       fetch(path, {
              method: 'GET',
              headers: myHeaders,
              credentials: "include"
            })        
  .then(function(response) {

    return response.json();
  })
.then(response =>display (response));

var path ="rm/"+next_user_level.toString();
       var myHeaders = new Headers();

fetch(path, {
              method: 'GET',
              headers: myHeaders,
              credentials: "include"
            })
.then(function(response) {return response.json()})
.then(function(myJson){console.log(myJson.result)})
;
  $('#user_level').text(next_user_level.toString());

  
};
    // 绑定click事件
    $('#next').bind('click', submit_form_next);

///
    function submit_form_previous(e) {
      var next_user_level=parseInt($('#user_level').text())
      next_user_level=next_user_level-1
      var path ="jq/"+next_user_level.toString()
var myHeaders = new Headers();
     /// console.log(next_user_level.toString());
       fetch(path, {
              method: 'GET',
              headers: myHeaders,
              credentials: "include"
            })       
  .then(function(response) {
    return response.json();
  })
.then(response =>display (response));

var path ="rm/"+next_user_level.toString();
fetch(path,{
              method: 'GET',
              headers: myHeaders,
              credentials: "include"
            })
.then(function(response) {return response.json()})
.then(function(myJson){console.log(myJson.result)})
;

$('#user_level').text(next_user_level.toString());
    };
    // 绑定click事件
    $('#previous').bind('click', submit_form_previous);


    //$('#to_bag').bind('click',to_bag);
    ///
$('#li .to_bag').click(to_bag_cl);



    //
    function bag_emptied(e){
      //localStorage.clear();
      var bag =new Array();
      localStorage.setItem('bag',JSON.stringify(bag))
      $('#bag_len').text("0")
    };
    $('#bag_emptied').bind('click',bag_emptied);

    

function dozen(e){
//var bag =new Array();
   var bag=JSON.parse(localStorage.getItem('bag'));
var user_level = parseInt($('#user_level').text());

for(i=user_level;i<user_level+4;i++){
console.log(i);
var curr_user_level=i;
bag.push(curr_user_level);
};

      user_level=curr_user_level+1;
 //     var user_level=parseInt($('#user_level').text())
       var path ="jq/"+user_level.toString()
var myHeaders = new Headers();
     ///  console.log(next_user_level.toString());
       fetch(path, {
              method: 'GET',
              headers: myHeaders,
              credentials: "include"
            })        
  .then(function(response) {

    return response.json();
  })
.then(response =>display (response));

var path ="rm/"+user_level.toString();
fetch(path, {
              method: 'GET',
              headers: myHeaders,
              credentials: "include"
            })
.then(function(response) {return response.json()})
.then(function(myJson){console.log(myJson.result)})
;
 // $('#user_level').text(user_level.toString());


      $('#user_level').text(user_level.toString())
      localStorage.setItem('bag',JSON.stringify(bag))
      $('#bag_len').text(bag.length.toString());

};

    $('#dozen').bind('click',dozen);


function explode_mode(){
    var data = new FormData();
    var word_index=$('#word_index').text();

    data.append( "word_index", word_index );

    var myHeaders = new Headers();

fetch("/explode_mode/",
{
    method: "POST",
    body: data,
    headers: myHeaders,
  credentials: "include"
})
.then(function(response) {
    return response.json();
  })
  .then(function (myJson){
    grade_list=myJson.grade_list;
   return display_gradelist(grade_list);
  })

};

$('#explode_mode').bind('click',explode_mode);


function synonyms(){
    var data = new FormData();
    var word_index=$('#word_index').text();

    data.append( "word_index", word_index );

    var myHeaders = new Headers();

fetch("/synonyms/",
{
    method: "POST",
    body: data,
    headers: myHeaders,
  credentials: "include"
})
.then(function(response) {
    return response.json();
  })
  .then(function (myJson){
    var synonyms_list=(myJson.synonyms)
    return display_gradelist(synonyms_list);
    //grade_list=myJson.grade_list;
   //return display_gradelist(grade_list);
  })

};

$('#synonyms').bind('click',synonyms);





function display_gradelist(grade_list){
  var cloneCount = 1;
  //console.log(JSON.stringify(bag));
  grade_list.forEach(function(item){
    var myHeaders = new Headers();
//fetch('https://account.scio.com/api/login/v1')
    var path ="/learnmode/jq/"+item.toString();
    cloneCount=cloneCount+1;
    var id_curr= 'li'+ cloneCount.toString();
    $("#li").clone().attr('id',id_curr.toString()).appendTo("ul")
    $("#"+id_curr).attr('class',("expand_explode_list ")+$("#"+id_curr).attr('class'))
              $('#'+id_curr.toString()).show()
              $('#'+id_curr.toString()+" #wordMusic").removeAttr('autoplay')
///$("#li").clone().appendTo("ul");
     /// console.log(next_user_level.toString());
  fetch(path, {
              method: 'GET',
              headers: myHeaders,
              credentials: "include"
            })       
  .then(function(response) {
    return response.json();
  })
  .then(function (myJson){
      //$('#'+id_curr.toString())
      $('#'+id_curr.toString()+' '+'#word_index').text(item.toString())
      var word=myJson.word;
    //  console.log(word);
      $('#'+id_curr.toString()+' '+'#word').text(myJson.word);
      $('#'+id_curr.toString()+' '+'#word_tip').text(myJson.word_tip);
      $('#'+id_curr.toString()+' '+'#word_def').text(myJson.word_def); 
      $('#'+id_curr.toString()+' '+'#wordMusic').attr('src',myJson.wordMusic);
      $('#'+id_curr.toString()+' '+'#image_a').attr('src',myJson.image_a);
       $('#'+id_curr.toString()+' '+'#image_b').attr('src',myJson.image_b);
       $('#'+id_curr.toString()+' '+'#clipart_c').attr('src',myJson.clipart_c);
       $('#'+id_curr.toString()+' '+'#clipart_d').attr('src',myJson.clipart_d);

       var dict_mw="https://www.merriam-webster.com/dictionary/"+word;
      // console.log(dict_mw);
       $('#'+id_curr.toString()+' '+'#dict_mw').attr('href',dict_mw);
        var dict_vo="https://www.vocabulary.com/dictionary/"+word;
       //console.log(dict_mw);
       $('#'+id_curr.toString()+' '+'#dict_vo').attr('href',dict_vo);
        var dict_bi="https://cn.bing.com/dict/search?q="+word;
       //console.log(dict_mw);
       $('#'+id_curr.toString()+' '+'#dict_bi').attr('href',dict_bi);

        var dict_the="https://www.freethesaurus.com/"+word;

         $('#'+id_curr.toString()+' '+'#dict_the').attr('href',dict_the);

         var dict_col="http://www.freecollocation.com/search?word="+word;

         $('#'+id_curr.toString()+' '+'#dict_col').attr('href',dict_col);
         
      $('#'+id_curr.toString()+' '+'.to_bag').attr('checked',false);

        $('#'+id_curr.toString()+' '+'.to_bag').click(function(){
          var word=($(this).parent().parent().parent().find("#word").text());
      //if (($(this).attr("checked"=="checked"))){
        if ($(this).is(':checked')){

          
      //alert(word+"   had been put into bag");

    //console.log("here");
  
    var user_level=parseInt(($(this).parent().parent().find("#word_index").text()));
   //console.log(user_level)
      var bag=JSON.parse(localStorage.getItem('bag'));

      flag = bag.indexOf(user_level);
      if (flag==-1)
      {
       bag.push(user_level);   
     };
         
      var bag_len=bag.length;

      $('#bag_len').text(bag_len.toString());
      localStorage.setItem('bag',JSON.stringify(bag));

                      };//end if

        });


} );///end then

});//end grade_list

}; ///end function

function to_bag_cl(){
      var word=($(this).parent().parent().parent().parent().find("#word").text());
      //if (($(this).attr("checked"=="checked"))){
        if ($(this).is(':checked')){

          
      //alert(word+"   had been put into bag");

    //console.log("here");
  
    var user_level=parseInt(($(this).parent().parent().parent().parent().find("#word_index").text()))
  
      var bag=JSON.parse(localStorage.getItem('bag'));

      flag = bag.indexOf(user_level);
      if (flag==-1)
      {
       bag.push(user_level);   
     };
         
      var bag_len=bag.length;

      $('#bag_len').text(bag_len.toString());
      localStorage.setItem('bag',JSON.stringify(bag));

                      };//end if


      };
///
function search(){
var data = new FormData();

var searchtxt=$('#searchtxt').val();
//console.log(searchtxt)
data.append( "searchtxt", searchtxt );
var myHeaders = new Headers();

fetch("/search",
{
    method: "POST",
    body: data,
    headers: myHeaders,
  credentials: "include"
})
.then(function(response) {
    return response.json();
  })
  .then(function(myJson){
    if (myJson.result){
      console.log('ok');
      display(myJson);
    }
    else {
      console.log('failed');
    }
  });
  $('#searchtxt').val("");

};
$('#search').bind('click',search);



///

});